<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="css/index.css"/>
    <link rel="stylesheet" href="css/bootstrap.main.css"/>
    <link rel="stylesheet" href="css/animate.css"/>
    <link rel="stylesheet" href="css/delay.css"/>
    <script src="js/index.js"></script>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/handlebars-v4.0.5.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/hammer.v2.0.8.js"></script>
</head>
<body>
    <div class="dim">
        <header class="head">
            <div class="head1">
                <div class="logo">
                        <button class="logo1 animated wobble delay07">点</button>
                        <button class="logo2 animated bounce delay1">吧</button>
                </div>
                        <button class="stop1">暂&nbsp;停</button>
                <div class="grade">
                    时间：&nbsp;<span class="p1 animated infinite">0</span>
                </div>
            </div>
        </header>
        <div class="section">
            <div class="dim1">

                <div class="game_box"></div>
                <div class="game_box2 bu1"></div>
                <div class="heart"></div>
            </div>
        </div>
        <footer class="foot">
            <div class="foot1">
                <button class="but1"></button>
                <button class="but2"></button>
                <button class="but3"></button>
            </div>
        </footer>
    </div>
    <div class="stop">
        <div class="start">
            <div class="start_box">
                <button class="start_but">开始游戏</button>
                <!--<button class="start_but">退出游戏</button>-->
            </div>

        </div>
    </div>
    <div class="over_box">
        <div class="over">
            Game&nbsp;Over
            <p class="p2">back</p>
            <p class="p3">共坚持了10s</p>
        </div>
    </div>

    <script>
//        全局变量
        var num1=150,num2=-20,num3=0,num4=-20,num5=0,color1,color2,color3,
                color_num1,color2_num1,color_num2, game_lun1,game_lun3,game_lun2,
                game_top2,game_heart2,game_top,game_heart,time=0;
//        全局变量
//暂停和开始
        $(".stop1").click(function(){
            $(".stop").fadeIn("800");
            clearInterval(game_lun1);
            clearInterval(game_lun2);
            clearInterval(game_lun3);
        });
        $(".start_but").click(function(){
            clearInterval(game_lun2);
            if( $(this).text()=="重新游戏"){
                num2=-20;
            }
            game_lun2=setInterval(function(){
                time++;
                $(".p1").text(time)
                        .addClass("pulse");

            },1000);
            $(".stop").fadeOut("800");
            $(this).text("继续游戏");
            gema_run();
            if(time>30){
                gema_run();
            }
        });
//暂停和开始
//游戏
        for(var i=1;i<4;i++){
            $(".but"+i).click(function(){
                color1=$(".game_box").css("background-color");
                color3=$(".game_box2").css("background-color");
                color2=$(this).css("background-color");
                if(time>30){
                    if(color1==color3){
                        gema_run();
                    }
                }
                if(color1==color2){
                    gema_run();

                }
            });
        }
//游戏
//游戏结束
        $(".p2").click(function(){
            $(".over_box").css({display:"none"});
            $(".start_but").text("重新游戏");
            $(".stop").fadeIn("800");
            $(".game_box").css({top:num2+"vh" , left:num3+"vw"});
        });

//游戏结束
        function gameover(){
            game_top = parseInt($(".game_box").css("top").split("px")[0]);
            game_heart = parseInt($(".heart").css("top").split("px")[0]);
            if(game_heart < game_top){
                clearInterval(game_lun1);
                clearInterval(game_lun2);
                console.log("清除interval");
                $(".over_box").css({display:"block"});
                $(".p3").text("共坚持了"+time+"s")
            }else{
//                console.log("没死");
            }
        }
        function gema_run(){
            color_num1=Math.floor(Math.random()*10);
            if(color_num1<3){
                $(".game_box").css("background-color","rgb(238, 250, 14)");
            }else if(color_num1<6 && color_num1>3){
                $(".game_box").css("background-color","rgb(250, 176, 127)");
            }else{
                $(".game_box").css("background-color","rgb(250, 105, 0");
            }
            num3=Math.floor(Math.random()*80);

            num2=10;
            console.log("第一个值："+num2);
            clearInterval(game_lun1);
            game_lun1=setInterval(function(){
                num2+=10;
                console.log("第二个值："+num2);
//                console.log(num3);
                $(".game_box").css({top:num2+"vh" , left:num3+"vw"});
                gameover();
            },num1);
        }
        function gameover2(){
            game_top2 = parseInt($(".game_box").css("top").split("px")[0]);
            game_heart2 = parseInt($(".heart").css("top").split("px")[0]);
            if(game_heart2 < game_top2){
                clearInterval(game_lun1);
                clearInterval(game_lun2);
                clearInterval(game_lun3);
                console.log("清除interval");
                $(".over_box").css({display:"block"});
                $(".p3").text("共坚持了"+time+"s")
            }else{
        //                console.log("没死");
            }
        }
        function gema_run2(){
            color2_num1=Math.floor(Math.random()*10);
            if(color2_num1<3){
                $(".game_box2").css("background-color","rgb(238, 250, 14)");
            }else if(color2_num1<6 && color2_num1>3){
                $(".game_box2").css("background-color","rgb(250, 176, 127)");
            }else{
                $(".game_box2").css("background-color","rgb(250, 105, 0");
            }
            num5=Math.floor(Math.random()*80);

            num4=8;
            clearInterval(game_lun3);
            game_lun3=setInterval(function(){
                num4+=8;
                $(".game_box2").css({top:num4+"vh" , left:num5+"vw"});
                gameover2();
            },num1);

        }
    </script>
</body>
</html>